import React, { Component } from 'react';
import './new_wenji.css'

/**
 * 文集列表
 * @params corpus 文集列表{id,name}
 * @params addAction(name) 新建文集
 * @params updateAction(id,name) 修改文集
 * @params delAction(id) 删除文集
 */
class NewWenji extends Component {

    state={
        active:0
    }

    liClickHandle=(key)=>{
        this.setState({active:key})
    }

    triggerAddWenji=()=>{
        const display = this.refs.form.style.display
        this.refs.form.style.display = display == 'block' ? 'none':'block';
    }

    render() {
        const {corpus} = this.props
        return (
             <div className="new_wenji">
                 <div className="new">
                    <div className="newbtn" onClick={this.triggerAddWenji}><i className="iconfont icon-jiahao"/> 新建文集</div>

                    <div className="form" ref={"form"}>
                        <input type="text" placeholder="请输入文集名..."/>
                        <div>
                            <a href="javascript:void();" className="submit abtn">提交</a>
                            <a href="javascript:void();" className="abtn" onClick={this.triggerAddWenji}>取消</a>
                        </div>
                    </div>
                </div>
                 <ul>
                     {corpus.map((val,key)=>(
                         <li key={key} className={`${this.state.active==key ? 'active':''}`} onClick={()=>this.liClickHandle(key)}>
                            <span>{val.name}</span>
                            {this.state.active == key && <a href="javascript:void();"><i className="iconfont icon-shezhi" /></a>}
                         </li>
                     ))}
                     <li></li>
                 </ul>
             </div>
        );
    }
}

export default NewWenji